<template>
  <footer class="bilibili-footer">
    <!-- Main content sections -->
    <div class="footer-main">
      <!-- Left section - Navigation links -->
      <div class="nav-links">
        <div v-for="(group, index) in linkGroups" :key="index" class="link-group">
          <h3 class="group-title">{{ group.title }}</h3>
          <ul>
            <li v-for="(link, linkIndex) in group.links" :key="linkIndex">
              <a :href="link.url">{{ link.text }}</a>
            </li>
          </ul>
        </div>
      </div>

      <!-- Right section - Social media -->
      <div class="social-media">
        <h3>客户端下载</h3>
        <div class="social-icons">
          <a v-for="(social, index) in socialLinks" :key="index" :href="social.url" class="social-link">
            <i :class="['icon', social.icon]"></i>
            <span>{{ social.name }}</span>
          </a>
        </div>
      </div>
    </div>

    <!-- Partners section -->
    <div class="partners">
      <h3>合作机构</h3>
    </div>

    <!-- Footer bottom - Legal information -->
    <div class="legal-info">
      <div class="legal-columns">
        <div class="legal-column" v-for="(column, index) in legalInfo" :key="index">
          <p v-for="(text, textIndex) in column" :key="textIndex">{{ text }}</p>
        </div>
      </div>
    </div>
  </footer>
</template>

<script setup>
// Navigation link groups
const linkGroups = [
  {
    title: '关于我们',
    links: [
      { text: '友情链接', url: '#' },
      { text: '联系我们', url: '#' },
      { text: 'bilibili认证', url: '#' }
    ]
  },
  {
    title: '加入我们',
    links: [
      { text: 'Investor Relations', url: '#' },
      { text: '传送门', url: '#' }
    ]
  },
  {
    title: '帮助中心',
    links: [
      { text: '授权申诉', url: '#' },
      { text: '壁纸站', url: '#' }
    ]
  },
  {
    title: '高级弹幕',
    links: [
      { text: '活动中心', url: '#' },
      { text: '名人堂', url: '#' }
    ]
  },
  {
    title: '活动专题页',
    links: [
      { text: '用户反馈论坛', url: '#' },
      { text: '专车号服务中心', url: '#' }
    ]
  }
]

// Social media links
const socialLinks = [
  { name: '新浪微博', icon: 'icon-weibo', url: '#' },
  { name: '官方微信', icon: 'icon-wechat', url: '#' }
]

// Legal information (grouped by columns)
const legalInfo = [
  [
    '广告热线：1002178-3-9PIC网址：[APP] 字数1248号',
    '[网络文化经营许可证：沪陕文]20105296-1348',
    '[信息网络传播部许可证书编号：0910417]'
  ],
  [
    '[互联网ICP备案：沪ICP备13002172号-3-9PIC网址：沪皖文]2000043',
    '违法不合法信息举报邮箱：help@bilibili.com',
    '违法不合法信息举报电话：40023323385'
  ],
  [
    '营业执照',
    '网上直营企业账号：12318 全国文化市场举报网站',
    '[产品标准：31011000002456号 [儿童信息管理专用章] 获取更多资料]'
  ]
]
</script>

<style scoped lang="scss">
.bilibili-footer {
  background-color: #f6f9fa;
  color: #666;
  font-size: 12px;
  padding: 40px 0 20px;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  line-height: 1.6;

  .footer-main {
    display: flex;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto 30px;
    padding: 0 20px;

    .nav-links {
      display: flex;
      flex-wrap: wrap;
      gap: 40px;

      .link-group {
        min-width: 120px;

        .group-title {
          font-size: 14px;
          color: #333;
          margin-bottom: 15px;
          font-weight: normal;
        }

        ul {
          list-style: none;
          padding: 0;
          margin: 0;

          li {
            margin-bottom: 10px;

            a {
              color: #666;
              text-decoration: none;

              &:hover {
                color: #00a1d6;
              }
            }
          }
        }
      }
    }

    .social-media {
      .social-icons {
        display: flex;
        gap: 20px;
        margin-top: 15px;

        .social-link {
          display: flex;
          flex-direction: column;
          align-items: center;
          text-decoration: none;
          color: #666;

          .icon {
            font-size: 24px;
            margin-bottom: 5px;
          }

          &:hover {
            color: #00a1d6;
          }
        }
      }
    }
  }

  .partners {
    max-width: 1200px;
    margin: 0 auto 20px;
    padding: 0 20px;
    border-top: 1px solid #e5e9ef;
    padding-top: 20px;
  }

  .legal-info {
    background-color: #f6f9fa;
    border-top: 1px solid #e5e9ef;
    padding-top: 20px;

    .legal-columns {
      display: flex;
      justify-content: space-between;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;

      .legal-column {
        flex: 1;
        min-width: 0;
        padding: 0 10px;

        p {
          margin: 5px 0;
          word-break: break-all;
        }
      }
    }
  }
}
</style>
